import React, { Component } from 'react'

export default class App extends Component {
  // 实例
  state = {
    count: 0,
  }
  handleClick() {
    // 函数中的 this 谁调用就是谁！！！
    // 类中方法默认也开启了严格模式！！
    // 咱们代码最终打包也会全局开启严格模式！！
    console.log(this.state.count)
  }
  // handleClick = () => {}
  render() {
    // #1
    /* const onClick = this.handleClick
    onClick() // window.onClick() */
    return (
      <div style={{ textAlign: 'center' }}>
        <h2>计数器：{this.state.count}</h2>
        {/* 如果你给 this.handleClick() 加括号了，确确实实是 this（实例）调用的 */}
        {/* 但是代码执行逻辑却变了，变成了上来就调用了，其实当你点击按钮的时候执行的是 this.handleClick() 调用完毕之后的返回值，即 undefined */}
        {/* <button onClick={this.handleClick()}>+1</button> */}

        {/* 把 this.handleClick 给了一个属性叫 onClick，当你点击按钮的时候，其实是 React 内部直接调用的 onClick 属性 */}
        {/* 等价于 #1 处的代码 */}
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}
